import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 10,
    prevCount: 10,
  };

  // getDerivedStateFromProps表示根据props的值去生成一个新的state
  // 里面要接受两个参数
  // 前面必须要加static, 组件必须要有state
  // 还必须去返回一个对象或者null
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log("getDerivedStateFromProps");
    // return {
    //   count: nextProps.num,
    // };

    // 1. nextProps.num 20  nextState.prevCount 10  ->  count 20  prevCount 20
    // 2. nextProps.num 40  nextState.prevCount 20  ->  count 40  prevCount 40
    // 3. nextProps.num 40  nextState.prevCount 40  ->  count 80
    if (nextProps.num === nextState.prevCount) {
      return null;
    } else {
      return {
        count: nextProps.num,
        prevCount: nextProps.num,
      };
    }
  }

  handleClick = () => {
    this.setState({
      count: 80,
    });
  };

  render() {
    return (
      <div>
        child组件 - {this.state.count} -{" "}
        <button onClick={this.handleClick}>btn</button>
      </div>
    );
  }

  // 在更新之前去获取一个快照(记录)
  // 必须要和componentDidUpdate一起配合使用
  // 去返回一个值或者null
  // 只有在ui处理(涉及到一些跟css样式相关的东西才有作用)的时候可能会用到
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 123;
  }

  // 在这两个生命周期中间，react要去更新dom

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
    console.log(snapshot);
  }
}

export default Child;
